<layout name="Common/common"/>
<style>
    .fil{
        margin-top:5px;
    }

</style>
<div class="tab-div">
    <div id="tabbar-div">
        <p>
            <span class="tab-front" >基本信息</span>
            <span class="tab-back" >电参数</span>
            <span class="tab-back" >产品图片</span>
            <span class="tab-back" >外形尺寸及特性</span>
            <span class="tab-back" >其他图形</span>
        </p>
    </div>
    <div id="tabbody-div">
        <form enctype="multipart/form-data" action="__SELF__" method="post">
            <table width="90%" class="general-table" align="center">
                <tr>
                    <td class="label">选择系列：</td>
                    <td >
                        <select name="cat_one">
                            <option value="0">请选择...</option>
                            <?php foreach($cats as $k=>$v): ?>
                                <option value="<?php echo $k;?>"><?php echo $v;?></option>
                            <?php endforeach;?>
                        </select>
                        <span class="require-field">*</span>
                        <select name="cat_tou" style="display:none">
                        </select>
                        <select name="cpxl" style="display:none">
                        </select>
                    </td>
                </tr>
                <tr id="cpxlmc">
                </tr>
                <tr>
                    <td class="label">系列简介：</td>
                    <td>
                        <textarea name="intro" cols="80" rows="6"></textarea>
                    </td>
                </tr>
                <tr>
                    <td class="label"><h4>技术标准：</h4></td>
                    <td>
                        <p><a href="javascript:;" onclick="bz(this);">[ + ]</a>  <input type="text" name="skill[]" value=""size="60" /></p>
                    </td>
                </tr>
                <tr>
                    <td class="label">降功耗说明：</td>
                    <td>
                        <input type="text" name="jghsm" value="" size="60"/>
                    </td>
                </tr>
                <tr>
                    <td class="label">降功耗曲线图：</td>
                    <td>
                        <input type="file" name="jgh_img" size="35" />
                    </td>
                </tr>
                <tr>
                    <td class="label">订货标识图：</td>
                    <td>
                        <input type="file" name="dhsl_img" size="35" />
                    </td>
                </tr>
                <tr>
                    <td class="label"><h4>说明：</h4></td>
                    <td>
                        <p><a href="javascript:;" onclick="bz(this);">[ + ]</a>  <input type="text" name="sm[]" value=""size="60" /></p>
                    </td>
                </tr>
            </table>
            <table width="90%" class="general-table" align="center" style="display:none">
                <tr>
                    <td class="label">电参数</td>
                    <td>
                        <ul class="diancs">
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td class="label"><a href="javascript:;" onclick="ct(this);" >[ + ]</a> 自定义电参数：</td>
                    <td >
                        <select name="zdy_dcs[]" >
                            <option value="">请选择</option>
                            <foreach name="diancanshu" item="v">
                                <option value="{$v.id}---{$v.name}">{$v.name}</option>
                            </foreach>
                        </select>
                        <select name="zdy_sign[]" >
                            <option value="＝">＝</option>
                            <option value="≦">≦</option>
                            <option value="≧">≧</option>
                            <option value="±">±</option>
                        </select>
                        <input type="text" class="p3" name="zdy_dcsval[]" size="40">
                    </td>
                </tr>
            </table>
            <table width="90%" class="general-table" align="center" style="display:none">
                <tr>
                    <td class="label"><input type="button" class="but" value="添加产品相册"></td>
                    <td>
                        <ul class="ul"></ul>
                    </td>
                </tr>
            </table>
            <table width="90%" class="general-table" align="center" style="display:none">
                <tr >
                    <td class="label"><a href="javascript:;" onclick="ct(this);" >[ + ]</a> 尺寸说明：</td>
                    <td>
                        <input type="text" name="ct_intro[]" size="60"><br>
                        <input class="fil" type="file" name="ct_img[]" >
                    </td>
                </tr>
                <tr >
                    <td class="label"><a href="javascript:;" onclick="ct(this);">[ + ]</a> 特性说明：</td>
                    <td>
                        <input type="text" name="ct_intro[]" size="60"><br>
                        <input class="fil" type="file" name="ct_img[]" id="">
                    </td>
                </tr>
            </table>
            <table width="90%" class="general-table" align="center" style="display:none">
                <tr >
                    <td class="label">
                        <a href="javascript:;" onclick="ct(this);" >[ + ]</a>
                        名称 : <input type="text" name="qt_name[]">
                    </td>
                    <td>
                        说明 : <input type="text" name="qt_intro[]" size="60"><br>
                        <input class="fil" type="file" name="qt_img[]" >
                    </td>
                </tr>
            </table>
            <div class="button-div">
                <input type="submit" value=" 确定 " class="button"/>
                <input type="reset" value=" 重置 " class="button" />
            </div>
        </form>
    </div>
</div>
<script>
    //添加技术标准
    function bz(a){
        var main = $(a).parent();
        if($(a).html() == '[ + ]'){
            var newp = main.clone();
            newp.find('a').html('[ - ]');
            newp.find('input').val('');
            main.after(newp);
        }else{
            main.remove();
        }
    }
    //点击模块更改样式
    $('#tabbar-div p span').click(function(){
        var i = $(this).index();
        $('.general-table').hide();
        $('.general-table').eq(i).show();
        $('.tab-front').removeClass('tab-front').addClass('tab-back');
        $(this).removeClass('tab-back').addClass('tab-front')
    });

    /*************************获取系列      开始**********************************/
    //获取二级分类
    $('select[name=cat_one]').change(function(){
        $('select[name=cpxl]').hide();
        $('#cpxlmc').html('');
        $('.diancs').html('');
        var flno = $(this).val();
        if(flno != 0){
            $.get('__CONTROLLER__/ajax_getcatlast/flno/'+flno,function(data){
                //console.log(data);
                var html = '<option value="0">请选择二级分类</option>';
                $(data).each(function(k,v){
                    html += '<option value="'+ v.flno+'">'+ v.flmc+'</option>';
                });
                $('select[name=cat_tou]').html(html);
                $('select[name=cat_tou]').show();
            })
        }else{
            $('select[name=cat_tou]').hide();
        }
    });
    //获取系列
    $('select[name=cat_tou]').change(function(){
        $('#cpxlmc').html('');
        $('.diancs').html('')
        var flno = $(this).val();
        if(flno == 0){
            $('select[name=cpxl]').hide();
        }else{
            $.get('__CONTROLLER__/ajax_getcatxl/flno/'+flno,function(vs){
                //console.log(vs);return;
                var data = vs.cpxlinfo;
                var flno = vs.flno;
                if(data.length == 0){
                    alert('该分类下暂无系列数据,请重新选择!');
                    $('select[name=cpxl]').hide();
                }else{
                    var html = '<option value="0">请选择系列</option>';
                    $(data).each(function(k,v){
                        html += '<option value="'+ v.cpxlno+'_'+ v.xpxlmc+'">'+ v.xpxlmc+'</option>';
                    });
                    $('select[name=cpxl]').html(html);
                    $('select[name=cpxl]').show();
                }
            })
        }

    });
    //获取电参数
    $('select[name=cpxl]').change(function(){
        var val = $(this).val();
        var flno = $('select[name=cat_tou]').val();
        var cpxlno = val.substring(0,val.indexOf('_'));
        var xlmc = val.substring(val.indexOf('_')+1);
        var html = '<td class="label">系列名称：</td><td><input type="hidden" name="cpxlno" value="'+cpxlno+'"><input style="color:red;" type="text" name="xlmc" size="60" value="'+xlmc+'" readonly="readonly" ></td>';
        $('#cpxlmc').html(html);
        $.get('__CONTROLLER__/ajax_getdiancanshu/flno/'+flno,function(vs){
            //console.log(vs);
            var html = '';
            $(vs).each(function(k,v){
                html += '<p><li><a href="javascript:;" onclick="remove(this);" >[ - ]</a> <input type="text" readonly="readonly"  value="'+ v.name+'" size="30"> <select name="sign['+ v.id+'---'+ v.name+']"><option value="＝">＝</option><option value="≤">≤</option><option value="≥">≥</option></select> <input type="text" name="diancan['+ v.id+'---'+ v.name+']" size="40"></li></p>';
            });
            $('.diancs').html(html);
        })
    });
    /*************************获取系列      结束**********************************/

    //添加产品图片按钮
    $('.but').click(function(){
        var html = '<p><li><input type="file" name="xl_img[]"><a href="javascript:;" onclick="remove(this);">[ - ]</a></li></P>';
        $('.ul').append(html);
    })
    //删除产品图片按钮
    function remove(a){
        $(a).parent().remove();
    }

    //添加尺寸和特性按钮
    function ct(a){
        var main = $(a).parent().parent();
        if($(a).html() == '[ + ]'){
            var newtr = main.clone();
            newtr.find('td a').html('[ - ]');
            newtr.find('td input').val('');
            main.after(newtr);
        }else{
            main.remove();
        }
    }
</script>
